<template>
  <div class="quote-wrap">
    <div class="content-wrap">
      <div class="quote-main" v-if="quoteList.length">
        <div
          class="table-wrap"
          :style="`width: ${columnsWidth}`"
          :id="id"
          :ref="id"
        >
          <div class="header">
            <div class="row">
              <div
                :class="['cell']"
                v-for="(e, i) in columns"
                :key="i"
                :style="{ width: e.class + 'rem' }"
              >
                <div class="val">
                  {{ e.label }}
                </div>
              </div>
            </div>
          </div>
          <div class="body">
            <div class="row" v-for="(item, index) in quoteList" :key="item.id">
              <div
                :class="['cell']"
                v-for="(e, i) in columns"
                :style="{ width: e.class + 'rem' }"
                :key="i"
              >
                <div class="text">
                  {{ e.prop === "index" ? index + 1 : item[e.prop] || "-" }}
                </div>
              </div>
            </div>
          </div>
          <div class="total-wrap">
            <div>共计{{ totalClassify }}个套件，{{ totalQty }}个材料</div>
            <div>
              <span class="p1">路费：{{ fee }}元</span>
              <span>总价：{{ totalSalePrice }}元</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-wrap" v-if="type == ''">
      <!-- <div class="btn btn-list" data-action="getEnv">预览图片</div> -->
      <div class="btn" @click="exportExcel">
        <span>导出Excel</span>
        <i v-if="loading" class="el-icon-loading"></i>
      </div>
      <div class="btn" @click="onExport">
        <span>生成图片</span>
        <i v-if="loading" class="el-icon-loading"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { html2Img } from "@/utils/index.js";

export default {
  data() {
    return {
      loading: false,
      id: "quoteRef",
      fee: 0,
      type: "",
      orderList: [],
      emptyUrl:
        "https://front-xps-cdn.xsyx.xyz/custom/stock-c/h5/prod_none.png",
      quoteList: [],
      orderInfo: {},
      columns: [
        {
          label: "序号",
          prop: "index",
          class: 80,
        },
        {
          label: "材料编码",
          prop: "productCode",
          class: 180,
        },
        {
          label: "材料名称",
          prop: "productName",
          class: 460,
        },
        {
          label: "规格",
          prop: "norms",
          class: 280,
        },
        {
          label: "单位",
          prop: "unit",
          class: 130,
        },
        {
          label: "色号",
          prop: "colour",
          class: 130,
        },
        {
          label: "数量",
          prop: "count",
          class: 90,
        },
      ],
    };
  },
  computed: {
    columnsWidth() {
      return this.columns.reduce((a, b) => a + b.class, 0) + "rem";
    },
    totalSalePrice() {
      const { mul, add } = this.$acc;
      return this.orderList.reduce(
        (a, b) => add(a, mul(b.count, b.salePrice)),
        0
      );
    },
    totalClassify() {
      return [...new Set(this.orderList.map((e) => e.id))].length;
    },
    totalQty() {
      return this.quoteList.reduce((a, b) => a + b.count, 0);
    },
  },
  beforeCreate() {
    let dom = document.getElementsByTagName("html");
    dom = dom[0] || dom;
    if (dom) dom.setAttribute("style", `font-size: ${dom.offsetWidth / 750}px`);
  },
  beforeDestroy() {
    let dom = document.getElementsByTagName("html");
    dom = dom[0] || dom;
    if (dom) dom.setAttribute("style", "");
  },
  mounted() {
    document.addEventListener("UniAppJSBridgeReady", function () {});
    this.initPage();
  },
  methods: {
    initPage() {
      const {
        id = "68",
        token = "daa08c1589fd40b3bb41580353230890",
        type = "",
      } = this.$route.query;
      this.type = type || "";
      this.$quinn.setStorage("tokenv3", token);
      this.$api.orderDetail({ id }, { ignore: true }).then((res) => {
        const data = res?.result || {};
        this.orderInfo = data;
        this.fee = data.fee || 0;
      });
      this.$api.getOrderQuotation({ id }, { ignore: true }).then((res) => {
        this.orderList = res?.result || [];
      });
      this.$api.getQuoteMaterials({ id }, { ignore: true }).then((data) => {
        if (data.code == 0) this.quoteList = data?.result || [];
      });
    },
    exportExcel(e) {
      const { id, orderName = "出库单" } = this.orderInfo;
      this.$api.getQuoteMaterials({ id }, { ignore: true }).then((res) => {
        if (res.code != 0) return;
        res = res.result || [];
        if (!res.length) return this.$message("暂无相关出库单");
        else {
          const excel = this.$quinn.exportExcel({
            data: res || [],
            type: "blob",
            defaultTitle: orderName || "出库单",
          });
          console.log(excel);
          this.$api
            .upload({
              file: excel,
            })
            .then((res) => {
              const fileUrl = this.$imgHost + res;
              console.log("fileUrl", fileUrl);
              uni.postMessage({
                data: {
                  file: fileUrl,
                },
              });
              setTimeout(() => {
                uni.navigateBack();
              }, 1);
            })
            .catch((e) => {
              console.log("upload", e);
            });
        }
      });
    },
    onExport() {
      const html = document.getElementById(this.id);
      this.loading = true;
      html2Img({
        html,
        scale: 1,
        type: "file",
      })
        .then((file) => {
          // console.log(file);
          this.$api
            .upload({
              file,
            })
            .then((res) => {
              const imgUrl = this.$imgHost + res;
              console.log("imgUrl", imgUrl);
              uni.postMessage({
                data: {
                  imgUrl,
                },
              });
              setTimeout(() => {
                uni.navigateBack();
              }, 1);
            })
            .catch((e) => {
              console.log("upload", e);
            });
        })
        .catch((e) => {
          console.log("html2img-error", e);
        })
        .finally((e) => {
          setTimeout(() => {
            this.loading = false;
          }, 100);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.quote-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .content-wrap {
    flex: 1;
    overflow-y: auto;
  }
  .btn-wrap {
    padding: 15rem 30rem 40rem;
    display: flex;
    align-items: center;
    .btn {
      flex: 1;
      height: 90rem;
      background: #409eff;
      color: white;
      border-radius: 90rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 30rem;
    }
  }
  .total-wrap {
    display: flex;
    flex-direction: column;
    padding: 25rem;
    .p1 {
      padding-right: 25rem;
    }
  }
  .quote-main {
    padding: 30rem 0 50rem;
  }

  .table-wrap {
    padding: 15rem;
    background: white;
    border-radius: 20rem;
    font-size: 28rem;
    line-height: 32rem;
    color: #333333;
    height: 100%;
    display: flex;
    flex-direction: column;

    .header {
      background: #f3f3f3;
      border-radius: 20rem 20rem 0 0;
      color: #777777;
      width: 100%;
      overflow-x: auto;
      font-weight: 500;
      pointer-events: none;

      .row {
        .cell {
          border: none !important;
        }
      }
    }

    .row {
      width: 100%;
      min-height: 90rem;
      display: flex;
      overflow: hidden;

      .cell {
        border-right: 1rem solid #ddd;
        border-bottom: 1rem solid #ddd;
        padding: 0 20rem;
        // flex: 1;
        overflow: hidden;
        display: flex;
        align-items: center;

        .text {
          word-break: break-all;
        }

        .val {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &:last-of-type {
          border-right: none;
        }
        &.f2 {
          flex: 2;
        }

        &.f3 {
          flex: 3;
        }

        &.f4 {
          flex: 4;
        }
      }
    }

    .body {
      border-radius: 0 0 12rem 12rem;
      overflow-y: hidden;
      overflow-x: auto;
      border: 1rem solid #ddd;
    }
  }
}
</style>
